<script setup>

import {UserFilled} from '@element-plus/icons-vue'
import {ref} from 'vue'
import commentCard2 from "@/views/BookInformation/components/commentCard2.vue";
import { useRoute } from 'vue-router';

const route = useRoute();
// 定义 props
const props = defineProps({
  username: {
    type: String,
    required: true
  },
  commentContent: {
    type: String,
    required: true
  },
  time: {
    type: String,
    required: true
  },
  img_urls:{
    type:String,
    required:true
  }
})
const isThumbsUp = ref(false)
const showReplies = ref(false);
const activeNames = ref([])  // 默认不展开

const handleChange = (val) => {
  console.log(val);
}
const thumbsUp = () => {
  props.likes++;
  isThumbsUp.value = true
}
const toggleReplies = () => {
  showReplies.value = !showReplies.value;
};


</script>

<template>
  <div class="commentCard">
    <div class="img">
      <el-avatar size='large'>
        <img :src="props.img_urls" alt="头像">
      </el-avatar>
    </div>
    <div class="word">
      <div>
        <p class="username">{{ props.username }}</p>
        <div class="icon">
          <!-- <div class="comment-comment">
            <i @click="thumbsUp" class="iconfont icon-dianzan" :class="{'icon-red':isThumbsUp===true}"></i>
            <p>{{ props.likes }}</p>
          </div> -->
          <!-- <div class="comment-comment">
            <i class="iconfont icon-pinglun"></i>
            <p>{{ props.comments }}</p>
          </div> -->
        </div>
      </div>
      <div>
        <p class="commentContent">{{ props.commentContent }}</p>
      </div>
      <div class="bottom">
        <div>
          <p class="time">{{ props.time }}</p>
        </div>
      </div>
      <!-- <div class="demo-collapse" style="background-color: red">
        <el-collapse class="demo-collapse" v-model="activeNames" @change="handleChange">
          <el-collapse-item class="el-collapse-item" :title="`共${comments.length}条回复`" name="1">
            <comment-card2 comments=1 likes=1 time=1 comment-content="1" username="1"></comment-card2>
          </el-collapse-item>
        </el-collapse>
      </div> -->
    </div>
  </div>
</template>

<style scoped>
.commentCard {
  display: flex;
  flex-direction: row;
}

.img {
  margin: 20px;
}

.word {
  margin: 20px;
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 15px;
  font-weight: normal;
  margin: 5px 0 5px 0;
  opacity: 0.6;
}

.commentContent {
  font-size: 15px;
  font-weight: normal;
  margin: 5px 0 25px 0;
}

.bottom {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  margin-right: 50px; /* 为整个底部区域预留出50px的右边距 */
}

.icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 20px; /* 与 time 文字之间的间距 */

  position: absolute;
  right: 0;
}

.icon-dianzan:hover,
.icon-pinglun:hover {
  color: red; /* 悬停时变为红色 */
}

.icon-red {
  color: red; /* 点赞后变为红色 */
}

.comment-comment {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 20px; /* 调整数各个图标和字之间的间距 */
}

.demo-collapse {

  display: flex;
  flex-direction: column;
  width: 800px;
  border: none;
}

.el-collapse-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: none;
}
</style>